<template>
  <div class="minimal-layout">
    <!-- 紧凑型顶部控制栏 -->
    <div class="control-bar">
      <div class="control-group">
        <el-select 
          size="small" 
          v-model="stationId" 
          @change="handleStationChange" 
          placeholder="选择电站"
          class="compact-select"
        >
          <el-option
            v-for="item in stationData"
            :key="item.id"
            :label="item.stationName"
            :value="item.id"
          />
        </el-select>
        
        <el-select 
          size="small" 
          v-model="menuSelVal" 
          @change="getMenuData" 
          placeholder="数据分类"
          class="compact-select"
        >
          <el-option
            v-for="item in menuSeloptions"
            :key="item"
            :label="item"
            :value="item"
          />
        </el-select>
      </div>
      
      <div class="control-group">
        <div class="view-toggles">
          <el-tooltip content="一对一映射" placement="bottom">
            <div 
              class="view-toggle" 
              :class="{ active: activeTabName === '1' }"
              @click="activeTabName = '1'"
            >
              <i class="iconfont">&#xe6e5;</i>
            </div>
          </el-tooltip>
          <el-tooltip content="一对多映射" placement="bottom">
            <div 
              class="view-toggle" 
              :class="{ active: activeTabName === '2' }"
              @click="activeTabName = '2'"
            >
              <i class="iconfont">&#xe63b;</i>
            </div>
          </el-tooltip>
        </div>
      </div>
    </div>

    <!-- 主要内容区 -->
    <div class="main-area">
      <!-- 树形导航面板 -->
      <div class="tree-panel">
        <div class="tree-header">
          <span class="panel-title">数据节点</span>
          <el-input 
            size="small"
            v-model="searchName" 
            @keyup.enter.native="getMenuData"
            placeholder="搜索节点..."
            suffix-icon="el-icon-search"
            clearable
            style="width: 160px;"
          />
        </div>
        
        <div class="tree-content">
          <treeMenu :treeData="menuList" name="lable" ref="treeMenu" nodeKey="id" @menuLeftClick="handleNodeClick"/>
        </div>
      </div>

      <!-- 数据展示面板 -->
      <div class="data-panel">
        <component 
            :is="activeTabName === '1' ? 'onToOne' : 'onToMore'"
            :codeId="codeId" 
            :stationId="stationId" 
            :copyCodeID="copyCodeID" 
            :tabName="activeTabName"
          />
      </div>
    </div>
  </div>
</template>

<script>
import bus from '@/utils/eventBus.js';
import {GetTreeStyle,GetTree,pointDetail,GetStationByCompanyID} from "@/api/https";
import onToOne from '@/components/page/collect/oneOnone.vue'
import onToMore from '@/components/page/collect/oneOnMore.vue'
import treeMenu from '@/components/base/treeMenu.vue'
export default {
  components: { onToOne, onToMore,treeMenu },
  data() {
    return {
      searchName: '',
      activeTabName: '2',
      menuList: [],
      menuSeloptions: [],
      menuSelVal: '',
      codeId: 0,
      stationData: [],
      stationId: 0,
      copyCodeID: 0,
    };
  },
  mounted(){
    bus.$emit('showBasin', false);
    this.getStation()
  },
  activated(){
    bus.$emit('showBasin', false);
  },
  
  methods: {
    getStation() {
      GetStationByCompanyID(0).then(res=>{
        if(res.isSuccess){
          this.stationData = res.data;
          this.stationId = this.stationData[0].id;
          this.getStyleData()
        }
      });
    },
    handleStationChange(val){
      this.stationId = val
      this.codeId = 0
      this.getStyleData()
    },
    getStyleData(){
      GetTreeStyle(this.stationId).then(res=>{
          if(res.isSuccess){
            this.menuSeloptions = res.data
            if(res.data && res.data.length > 0){
              this.menuSelVal = res.data[0];
              this.getMenuData()
            }
          }
      });
    },
    getMenuData() {
      this.codeId = 0
      GetTree(this.stationId,this.menuSelVal,this.searchName).then(res=>{
          if(res.isSuccess){
              this.menuList = res.data;
          }
      });
    },

    handleNodeClick(data){
      if(data.codE_ID){
        this.codeId = data.codE_ID
        pointDetail({
          codeId:data.codE_ID
        }).then(res=>{
            if(res.code == 200){
              if(res.data.relationType == 'one-to-many'){
                this.activeTabName = '2'
              }else{
                this.activeTabName = '1'
              }
            }
        })
      }
    },
    
    handleCopyData(){
      if(this.codeId){
        pointDetail({
          codeId:this.codeId
        }).then(res=>{
            if(res.code == 200){
              if(this.activeTabName == '1'){
                if(res.data.relationType == 'one-to-one'){
                  this.copyCodeID = this.codeId
                  this.$message.success('复制成功');
                }else{
                  this.$message.error('类型不匹配，请切换视图');
                }
              }else if(this.activeTabName == '2'){
                if(res.data.relationType == 'one-to-many'){
                  this.copyCodeID = this.codeId
                  this.$message.success('复制成功');
                }else{
                  this.$message.error('类型不匹配，请切换视图');
                }
              }
            }
        })
      }else{
        this.$message.error('请先选择要粘贴数据的节点');
      }
    }
  }
};
</script>

<style scoped lang="scss">
.minimal-layout {
  height: 100vh;
  display: flex;
  flex-direction: column;
  background: #f8fafc;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  
  .control-bar {
    background: white;
    border-bottom: 1px solid #e2e8f0;
    padding: 12px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 16px;
    
    .control-group {
      display: flex;
      align-items: center;
      gap: 12px;
    }
    
    .compact-select {
      width: 160px;
      
      ::v-deep .el-input__inner {
        border-radius: 6px;
        border: 1px solid #cbd5e0;
      }
    }
    
    
    .view-toggles {
      display: flex;
      background: #f1f5f9;
      border-radius: 6px;
      padding: 2px;
      
      .view-toggle {
        width: 36px;
        height: 36px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 5px;
        cursor: pointer;
        transition: all 0.2s ease;
        
        &:hover {
          background: #e2e8f0;
        }
        
        &.active {
          background: white;
          box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
          
          i {
            color: #3b82f6;
          }
        }
        
        i {
          font-size: 16px;
          color: #64748b;
        }
      }
    }
  }
  
  .main-area {
    flex: 1;
    display: grid;
    grid-template-columns: 270px 1fr;
    gap: 0;
    overflow: hidden;
    
    .tree-panel {
      background: white;
      border-right: 1px solid #e2e8f0;
      display: flex;
      flex-direction: column;
      
      .tree-header {
        padding: 16px;
        border-bottom: 1px solid #e2e8f0;
        display: flex;
        align-items: center;
        justify-content: space-between;
        
        .panel-title {
          font-weight: 600;
          color: #1e293b;
        }
      }
      
      .tree-content {
        flex: 1;
        overflow-y: auto;
        padding: 8px 16px;
        
        .tree-container{
          height:calc(100vh - 500px)
        }
      }
    }
    
    .data-panel {
     flex:1
    }
  }
  
  .status-indicator {
    position: fixed;
    bottom: 20px;
    right: 20px;
    padding: 8px 12px;
    background: #fef3c7;
    border: 1px solid #fcd34d;
    border-radius: 6px;
    font-size: 12px;
    color: #92400e;
    display: flex;
    align-items: center;
    gap: 6px;
    opacity: 0;
    transform: translateY(10px);
    transition: all 0.3s ease;
    
    &.active {
      opacity: 1;
      transform: translateY(0);
    }
    
    i {
      color: #84cc16;
    }
  }
}
</style>